<template>
  <div>Home</div>
  <div class="state">
    <span>展示aboutCount ： {{ aboutCount }}</span>
    <br />
    <span>展示homeCount ： {{ homeCount }}</span>
  </div>
  <div class="state">
    所有的getters展示
    <span>展示aboutGetter ： {{ aboutCountGet }}</span>
  </div>
  <div class="state">
    使用commit 其他的mutattions
    <button @click="changeAboutCount">修改aboutCount</button>
  </div>
  <div class="state">
    派发action
    <button @click="changeAboutAction">修改about中的incrementAction</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState, createNamespacedHelpers } from 'vuex'
// 直接取到对应模块的map函数，以此类推
const { mapState: homeMmapState, mapGetters: homemapGetters, mapMutations: homemapMutations, mapActions: homemapActions } = createNamespacedHelpers('home')
export default {
  computed: {
    ...mapGetters('about', ['aboutCountGet']),
    ...homeMmapState(['homeCount']),
    ...mapState('about', ['aboutCount']),
  },
  methods: {
    ...mapMutations({
      changeAboutCount: 'about/increment',
    }),
    ...mapActions({
      changeAboutAction: 'about/incrementAction',
    }),
  },
}
</script>

<style scoped>
.state {
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 5px;
}
</style>
